<!--  -->
<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <el-table
        ref="cartTable"
        :data="tableData"
        style="width: 100%;"
        align="center"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="商品图标" width="150">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.produce_icon"></el-image>
          </template>
        </el-table-column>
        <el-table-column fixed prop="produce_name" label="商品名称" width="150"></el-table-column>
        <el-table-column prop="produce_price" label="单价" width="120"></el-table-column>
        <el-table-column width="180" label="数量">
          <template slot-scope="scope">
            <el-input-number
              :min="1"
              :max="scope.row.produce_max"
              v-model="scope.row.produce_quantity"
              @change="(value)=>{quantityChange(value,scope.$index)}"
              size="small"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额" width="120"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteProduce(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-row :gutter="20" style="margin: 10px">
      <el-col :span="6">
        <div class="grid-content bg-purple" style="padding: 5px">
          <el-button type="danger" size="small" @click="deleteSelect">删除所选商品</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="padding: 5px"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="padding: 5px;float:right">
          <el-tag type="danger" effect="plain" :hit="false">{{total}}元</el-tag>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="padding: 5px">
          <a href="https://element.eleme.cn/2.12/#/zh-CN/component/button"><el-button size="small" type="primary" style="width:100px" @click="payFor">支付</el-button></a>
        </div>
      </el-col>
    </el-row>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "App",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      total: 0.0,
      checked: false,
      tableData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    payFor(){

    },
    selectionChange(selection) {
      this.total = 0;
      for (let i = 0; i < selection.length; i++) {
        this.total = this.total + selection[i].money;
      }
    },
    deleteSelect() {
      //console.log(this.$refs.cartTable.store.states.selection);
      this.$confirm("确认要删除所选商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let array = [];
          let temp = this.$refs.cartTable.store.states.selection;
          for (let i = 0; i < temp.length; i++) {
            array.push(temp[i].produce_id);
          }
          let url = "http://47.112.216.97:88/sc/shoppingcart/shoppingcart/delete";
          this.$http.post(url, array).then((data) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.tableData = [];
            this.getShoppingCartInfo();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteProduce(index) {
      this.$confirm("确认要删除该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = this.tableData[index].produce_id;
          let url = "http://47.112.216.97:88/sc/shoppingcart/shoppingcart/delete";
          this.$http.post(url, [id]).then((data) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.tableData = [];
            this.getShoppingCartInfo();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getShoppingCartInfo() {
      let url = "http://47.112.216.97:88/sc/shoppingcart/shoppingcart/cart";
      this.$http.get(url).then((data) => {
        //console.log("Data", data);
        for (let i = 0; i < data.body.cart.length; i++) {
          let count =
            data.body.cart[i].producePrice * data.body.cart[i].produceQuantity;
          //this.total = this.total + count;
          this.tableData.push({
            produce_id: data.body.cart[i].produceId,
            produce_name: data.body.cart[i].produceName,
            produce_price: data.body.cart[i].producePrice,
            produce_quantity: data.body.cart[i].produceQuantity,
            produce_icon: data.body.cart[i].produceIcon,
            produce_max: data.body.cart[i].produceStock,
            money: count,
          });
        }
        //console.log("tableDatat", this.tableData);
      });
    },
    quantityChange(value, index) {
      let id = this.tableData[index].produce_id;
      let url = "http://47.112.216.97:88/sc/shoppingcart/shoppingcart/update";
      this.$http
        .post(url, {
          produceId: id,
          produceQuantity: this.tableData[index].produce_quantity,
        })
        .then((data) => {});
      // this.tableData = [];
      // this.getShoppingCartInfo();
      this.tableData[index].money =
        this.tableData[index].produce_quantity *
        this.tableData[index].produce_price;
      this.total = 0;
      let temp = this.$refs.cartTable.store.states.selection;
      for (let i = 0; i < temp.length; i++) {
        this.total += temp[i].money;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getShoppingCartInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>


.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>